<!DOCTYPE HTML>
<html style="background: #f3f3f3">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>签约网</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/lawyer_user.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />

    <script type="text/javascript" src="../script/api.js"></script>

    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/lawyer.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>


    <style type="text/css">
        .header .swiper-pagination {
            position: static !important;
        }
        .all-photos {
            height: calc(100% - 0.88rem - 1px);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
        }
        .photos-all{
            padding: 0.3rem 0.1rem;
        }
        .photos-all ul li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 9.7rem;
        }

        .photos-all ul li img {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }

        .all-photos .download {
            position: absolute;
            right: 0.3rem;
            bottom: 0.8rem;
            width: 0.76rem;
            height: 0.76rem;
            background: url("/Public/Home/img/downloadPic.png") center no-repeat;
            background-size: 0.76rem auto;
            border-radius: 50%;
            z-index: 999;
        }
    </style>
</head>
<body style="background: #f3f3f3">
<div id="secHeader">
  <header class="header">
      <a onclick="aaplay('personal_myOrder_received')"  class="back_btn"><img src="../image/head-fanhui.png" alt=""></a>
      <h2 class="swiper-pagination"></h2>
  </header>
</div>
<section class="all-photos">
    <div class="photos-all swiper-container">
        <ul class="swiper-wrapper" id="con">
            <!--<li class="swiper-slide"><img src="../image/applyh_pic1.png" alt=""></li>
            <li class="swiper-slide"><img src="../image/applyh_pic2.png" alt=""></li>
            <li class="swiper-slide"><img src="../image/applyh_pic3.png" alt=""></li>-->
        </ul>
    </div>
    <a href="" id="down"><div class="download"></div></a>
</section>

</body>
<script type="text/javascript">
    $(function () {
        var mySwiper = new Swiper('.photos-all', {
            autoplay: false,//可选选项，自动滑动
            initialSlide: 0,
            pagination : '.swiper-pagination',
            paginationType : 'fraction',
        });
        $(".all-photos").css({
            'height': $(window).height()-$('.header').outerHeight(true)
        });
    });
    var para

    apiready = function () {
      $api.fixStatusBar( $api.dom('#secHeader') );
      api.setStatusBarStyle({
          style: 'light'
      });


        para=api.pageParam;



           tuwen()
    };



    function tuwen() {
        p={token:token,id:para.id};
        api.ajax({
            url: webSiteUrl+'/app/user/tuwen',
            method: 'post',
            data: {
                values:p
            }
        }, function(ret, err) {

            if(ret.code==200){
                html = "";
                var tj=ret.data.icon;

                if(tj != null){
                    $('#down').attr('href',webSiteUrl+tj[0])
                    $('#down').attr('download',webSiteUrl+tj[0])

                    for(var i=0;i<tj.length;i++){
                        html+='<li class="swiper-slide"><img src="'+webSiteUrl+tj[i]+'"></li>';

                    }
                    $('#con').html(html);

                    var mySwiper = new Swiper('.photos-all', {
                        autoplay: false,//可选选项，自动滑动
                        initialSlide: 0,
                        pagination : '.swiper-pagination',
                        paginationType : 'fraction',
                    });
                    $(".all-photos").css({
                        'height': $(window).height()-$('.header').outerHeight(true)
                    });
                }


            }

        });
    };


    $(".userInfo_list ul li select").change(function () {
        $(this).prev('input').val($(this).val());
    });

    //选择类型
    $(".check_kinds").click(function () {
        $(".fixed_checked").fadeIn().find('.checked_section').animate({
            'top': 0,
            'opacity': 1
        },400);
        $(".check_box ul li").eq(0).addClass('active').siblings('li').removeClass('active');
        $(".kinds_item ul").eq(0).show().siblings('ul').hide();
        $(".kinds_item ul").eq(0).find('li').eq(0).addClass('active').siblings('li').removeClass('active');
    });

    $(".check_box ul li").click(function () {
        $(this).addClass('active').siblings('li').removeClass('active');
        $(".kinds_item ul").eq($(this).index()).show().siblings('ul').hide();
        $(".kinds_item ul").eq($(this).index()).show().find('li').eq(0).addClass('active').siblings('li').removeClass('active');
    });

    $(".kinds_item ul li").click(function () {
        $(".kinds_item ul li").removeClass('active');
        $(this).addClass('active').siblings('li').removeClass('active');
    });

    $(".sure_btn").click(function () {
        $(".fixed_checked").fadeOut().find('.checked_section').animate({
            'top': '-4rem',
            'opacity': 0
        },400);

        var str=$(".check_box ul li.active").html()+' '+$(".kinds_item ul li.active").html();
        if(str!=''){
            $(".check_kinds").html(str).css('color','#333');
        }else {
            $(".check_kinds").css('color','#999');
        }
    });

    $(".checked_section").click(function (e) {
       e.stopPropagation();
    });
    $(".fixed_checked").click(function () {
        $(".fixed_checked").fadeOut().find('.checked_section').animate({
            'top': '-4rem',
            'opacity': 0
        },400);
    });

</script>
</html>
